<template>
    <div class="con">
        <headNav title="邀请合伙人" :isHome="false" :isBack="true"></headNav>
        <div class="feedList" v-loadmore='loadmore'>
            <!-- {{list}} -->
            <ul>
                <li v-for="(item, index) in list" :key="index">
                    <div class="yaoName">受邀人：{{item.agentName}}</div>
                    <div class="yaoNum">手机号：{{item.phone}}</div>
                    <div class="yaoNum">受邀类型：{{item.agentTypeDesc}}</div>
                    <div class="yaoNum">提交时间：{{item.createTime}}</div>
                    <div v-show="item.examineFlag == 2" class="shenhe">{{item.examineFlagDesc}}</div>
                    <div  v-show="item.examineFlag == 0" class="shenhe2">{{item.examineFlagDesc}}</div>
                    <div v-show="item.examineFlag == 1" class="shenhe3">{{item.examineFlagDesc}}</div>
                </li>
            </ul>
            <van-loading v-if="isMore"  size="24px" vertical class="loading">加载中...</van-loading>
            <van-loading v-else  size="0px" vertical class="loading">没有更多了</van-loading>
        </div>
        <bottomNav :index="4"></bottomNav>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import bottomNav from '@/components/bottomNav/bottomNav.vue'
import {getAgentList} from '@/api/shareApi'
export default {
  name: 'feedback',
  components: {
    headNav,
    bottomNav
  },
  data () {
      return {
          list: [],
          limit: 10,
          page: 1,
          isMore: true
      }
  },
  methods: {
      async getAgentList (page) {
          this.page = page
          let res = await getAgentList({
              limit: this.limit,
              page: this.page
          })
          let records
          if (res.data) {
              records = res.data.records
          } else {
              records = []
          }
          
          this.list = this.list.concat(records)

          if (records.length < this.limit) {
              this.isMore = false
          }
      },
      loadmore () {
          console.log('loadmore...')
          if (!this.isMore) {
              return
          }
          this.getAgentList(this.page + 1)
      }
  },
  mounted () {
      this.getAgentList(1)
  }
}
</script>
<style scoped>
.con{
    height: 100%;overflow: hidden;
}
.feedList {
    padding: 0.01rem 0; height: calc(100% - 1.98rem); overflow-y: scroll;
}
.feedList li{
  width: 6.42rem;
height: 2.60rem;
background: #FFFFFF;
box-shadow: 0rem 0.02rem 0.16rem 0rem rgba(0, 0, 0, 0.05);
border-radius: 0.15rem;
margin: 0rem auto;
margin-top: 0.3rem;
padding-left: 0.3rem;
overflow: hidden;
position: relative;
}
.yaoName{
    font-size: 0.28rem;
    font-weight: bold;
    margin-top: 0.36rem;
}
.yaoNum{
    font-size: 0.28rem;
    color: #666666;
    margin-top: 0.16rem;
}
.shenhe{
    width: 1.30rem;
    height: 0.60rem;
    background: #FFF4E6;
    border-radius: 0.30rem 0rem 0rem 0.30rem;
    color: #FF8A00;
    font-size: 0.26rem;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0.26rem;
    line-height: 0.6rem;
}
.shenhe2{
    width: 1.30rem;
    height: 0.60rem;
    background: #FFE9E7;
    border-radius: 0.30rem 0rem 0rem 0.30rem;
    color: #FF352B;
    font-size: 0.26rem;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0.26rem;
    line-height: 0.6rem;
}
.shenhe3{
    width: 1.30rem;
    height: 0.60rem;
    background: #E6EDFE;
    border-radius: 0.30rem 0rem 0rem 0.30rem;
    color: #4B7BF9;
    font-size: 0.26rem;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0.26rem;
    line-height: 0.6rem;
}
.loading{
    padding: 0.1rem 0;
}
</style>